<template>
  <div
    class="lyricPage"
    :style="{
      background: `rgba(0,0,0,0.9) url(${
        song.picUrl || song.al.picUrl
      }) no-repeat top center/cover `,
    }"
    @click.stop
  >
    <el-container>
      <button
        class="out_of el-icon-caret-left"
        @click="out_OF_lyricPage"
      ></button>
      <el-main>
        <p class="name">{{ song.name }}</p>
        <div class="app_control">
          <i class="el-icon-minus" @click="minimize"></i>
          <i class="el-icon-full-screen" @click="maximize"></i>
          <i class="el-icon-close" @click="close"></i>
        </div>
        <div class="music_control">
          <svg
            t="1648294424503"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4777"
            width="200"
            height="200"
            @click.stop="change_volumeShow"
          >
            <path
              d="M605.6 929.8c-35.7 0-74.8-21-123.1-66.2-37.4-35-74.4-78.9-107-117.6-19.3-23-37.8-44.9-52.5-60.2H173.4c-25 0-45.3-21.8-45.3-48.6V400.5c0-26.8 20.3-48.5 45.3-48.5 16.6 0 30 13.4 30 30 0 11.2-6.2 21-15.3 26.2v217.5h159.2l8.7 8.3c18.2 17.3 40 43.2 65.3 73.3 31.5 37.4 67.3 79.9 102.1 112.5 44.2 41.3 69 50 82 50.1h8.8c1 0 1.9-0.1 2.7-0.2l-0.3-718.2c-0.8-0.1-1.7-0.2-2.8-0.2h-8.7c-23.5 0-54.6 18.3-92.4 54.4-36.7 35.1-73.2 80.5-105.3 120.7-25.4 31.7-47.3 59.1-66 77.3-11.9 11.6-30.9 11.3-42.4-0.6-11.6-11.9-11.3-30.9 0.6-42.4 16-15.6 37.9-42.9 61-71.8 33.3-41.6 71.1-88.7 110.7-126.5 50.1-47.8 93.8-71 133.8-71h8.7c35.2 0 62.8 22.6 62.8 51.4l0.3 735.8c-0.1 28.9-27.6 51.4-62.7 51.4l-8.6-0.2zM724.3 636.2c-10.3 0-20.3-5.3-25.9-14.8-8.4-14.3-3.7-32.7 10.6-41.1 22.1-13.1 35.9-37.5 35.9-63.7 0-26.2-13.7-50.7-35.9-63.7-14.3-8.4-19-26.8-10.5-41.1 8.4-14.3 26.8-19 41.1-10.5 40.3 23.8 65.3 68 65.3 115.4 0 47.4-25 91.6-65.3 115.4-4.9 2.7-10.1 4.1-15.3 4.1z"
              fill="#dbdbdb"
              p-id="4778"
            ></path>
            <path
              d="M751.6 745.7c-10.9 0-21.4-6-26.7-16.4-7.5-14.8-1.7-32.8 13.1-40.4 59.5-30.4 97.9-97.7 97.9-171.5S797.5 376.3 738 345.9c-14.8-7.5-20.6-25.6-13.1-40.4 7.5-14.8 25.6-20.6 40.4-13.1 38.7 19.8 71.5 51.1 94.7 90.5 23.5 40 36 86.5 36 134.4 0 47.9-12.4 94.3-36 134.4-23.2 39.4-55.9 70.8-94.6 90.5-4.5 2.5-9.2 3.5-13.8 3.5z"
              fill="#dbdbdb"
              p-id="4779"
            ></path>
          </svg>
          <svg
            t="1648294614546"
            class="icon"
            viewBox="0 0 1224 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6615"
            width="200"
            height="200"
            @click="change_drawer"
          >
            <path
              d="M657.38638 430.059755h519.241845a45.152085 45.152085 0 1 0 0-90.304171H657.38638a45.152085 45.152085 0 0 0 0 90.304171z m521.261114 203.181325H657.38638a45.152085 45.152085 0 1 0 0 90.302131h521.261114a45.152085 45.152085 0 1 0 0-90.302131z m0 293.483456H657.38638a45.152085 45.152085 0 0 0 0 90.302132h521.261114a45.152085 45.152085 0 1 0 0-90.302132z"
              fill="#dbdbdb"
              p-id="6616"
            ></path>
            <path
              d="M669.597861 160.218066a576.554418 576.554418 0 0 0-224.40405-157.127707 45.017468 45.017468 0 0 0-61.406184 41.990603v556.041498a236.805219 236.805219 0 1 0 90.304171 185.799292c0-2.482273-0.226403-4.966587-0.450766-7.44886 0-1.354338 0.450766-2.484313 0.450766-3.838652V116.193916a490.93536 490.93536 0 0 1 127.778954 103.396787 45.035825 45.035825 0 0 0 67.727109-59.374676z m-432.549922 773.441335a146.741728 146.741728 0 1 1 146.739688-146.741729 147.029321 147.029321 0 0 1-146.739688 146.743768z"
              fill="#dbdbdb"
              p-id="6617"
            ></path>
          </svg>
          <div class="volume_popover" @clik.stop v-show="volumeShow">
            <div class="block">
              <el-slider
                v-model="volume"
                vertical
                height="100px"
                @change="change_volume"
              >
              </el-slider>
            </div>
          </div>
        </div>
        <songLyric :discHeight="680"></songLyric>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import songLyric from "../../components/songLyric/index.vue";
import store from "../../store";
import ipcRenderer from "../../ipcRenderer/ipcRenderer";

export default {
  name: "lyricPage",

  data() {
    return {
      drawer: false,
      volume: 60, // 音量的取值范围在：0(无声)~1(最大声)之间。
      volumeShow: false,
    };
  },
  components: {
    songLyric,
  },
  computed: {
    song: function () {
      return store.state.Counter.song;
    },
  },

  mounted() {},

  methods: {
    change_drawer() {
      store.commit("change_drawer", true);
    },
    change_volumeShow() {
      this.volumeShow = !this.volumeShow;
    },
    change_volume(volume) {
      store.commit("change_volume", volume / 100);
    },
    out_OF_lyricPage() {
      this.$emit("updata:lyricPageShow");
    },
    maximize() {
      console.log("maximize");
      ipcRenderer.maximize();
    },
    minimize() {
      console.log("minimize");
      ipcRenderer.minimize();
    },
    close() {
      console.log("close");
      ipcRenderer.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.lyricPage {
  background-color: rgb(70, 69, 69);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 101;
  color: #ffffff;
  margin: 0;
  padding: 0;

  .el-container {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;

    .out_of {
      border: 0;
      outline: none;
      background-color: rgba($color: #ffffff, $alpha: 0.2);
    }

    .el-main {
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
      background-color: rgba($color: #000000, $alpha: 0.2);
      position: relative;

      .name {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba($color: #ffffff, $alpha: 0.2);
        padding: 10px;
        border-radius: 6px;
        font-size: 20px;
      }
      .app_control {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
        background-color: rgba($color: #000000, $alpha: 0.6);
        padding: 10px;
        border-radius: 6px;
      }
      .music_control {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 10;
        background-color: rgba($color: #000000, $alpha: 0.6);
        padding: 10px;
        border-radius: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        svg {
          width: 20px;
          height: 20px;

          &:nth-child(1) {
            margin-right: 10px;
          }
        }

        .volume_popover {
          position: absolute;
          top: -135px;
          left: -10px;
          background-color: rgba($color: #ffffff, $alpha: 0.8);
          padding: 15px 0;
          border-radius: 10px;
        }
      }

      ul {
        li {
          color: #ffffff;
        }
      }
    }
  }
}
</style>